
const box = document.querySelector('.bannercenter .box')
const imgBox = document.querySelector('.bannercenter .box ul')
const pointBox = document.querySelector('.bannercenter .box ol')
const w = box.clientWidth
let timer
let index = 1
let flag = true

function move(ele, target, fn = () => {
}) {
    let timer;
    let count = 0;
    clearInterval(timer)
    for (let key in target) {
        count++
        if (key === 'opacity') {
            target[key] *= 100
        }
        timer = setInterval(() => {
            let current = key === 'opacity' ? window.getComputedStyle(ele)['opacity'] * 100 : parseFloat(window.getComputedStyle(ele)[key])
            let distant = (target[key] - current) / 10
            distant = distant > 0 ? Math.ceil(distant) : Math.floor(distant)
            if (target[key] === current) {
                clearInterval(timer)
                count--
                if (!count) {
                    fn()
                }
            } else {
                ele.style[key] = key === 'opacity' ? (current + distant) / 100 : current + distant + 'px'
            }
        }, 5)

    }
}

setPoint()

function setPoint() {
    const num = imgBox.children.length
    const frg = document.createDocumentFragment()
    for (let i = 0; i < num; i++) {
        const li = document.createElement('li')
        li.setAttribute('type', 'point')
        li.setAttribute('type_index', i + 1)
        if (i === 0) {
            li.classList.add('active')
        }
        frg.appendChild(li)
    }
    pointBox.appendChild(frg)
    pointBox.style.width = num * (510 / 11) + 'px'
    pointBox.style.marginLeft = -pointBox.clientWidth / 2 + 'px'
}

copyEle()

function copyEle() {
    const first = imgBox.lastElementChild.cloneNode(true)
    const last = imgBox.firstElementChild.cloneNode(true)
    imgBox.appendChild(last)
    imgBox.insertBefore(first, imgBox.firstElementChild)
    imgBox.style.width = imgBox.children.length * 100 + '%'
    imgBox.style.left = -w + 'px'
}

autoPlay()

function autoPlay() {
    clearInterval(timer)
    timer = setInterval(function () {
        index++
        move(imgBox, {left: -w * index}, End)
    }, 1500)
}

End()

function End() {
    if (index === imgBox.children.length - 1) {
        index = 1
        imgBox.style.left = -w * index + 'px'
    }
    if (index === 0) {
        index = imgBox.children.length - 2
        imgBox.style.left = -w * index + 'px'
    }
    for (let i = 0; i < pointBox.children.length; i++) {
        pointBox.children[i].className = ''
    }
    pointBox.children[index - 1].className = 'active'
    flag = true
}

overout()

function overout() {
    box.addEventListener('mouseover', function () {
        clearInterval(timer)
    })
    box.addEventListener('mouseout', function () {
        autoPlay()
    })
}

onEvent()

function onEvent() {
    box.addEventListener('click', function (eve) {
        let e = eve || event
        const target = e.target || e.srcElement
        if (target.className === 'left') {
            if (!flag) return
            index--
            move(imgBox, {left: -index * w}, End)
            flag = false
        }
        if (target.className === 'right') {
            if (!flag) return
            index++
            move(imgBox, {left: -index * w}, End)
            flag = false
        }
        if (target.getAttribute('type') === 'point') {
            if (!flag) return
            index = target.getAttribute('type_index') - 0
            move(imgBox, {left: -index * w}, End)
            flag = false
        }
    })
}

changeTab()

function changeTab() {
    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState === 'hidden') {
            clearInterval(timer)
        } else if (document.visibilityState === 'visible') {
            autoPlay()
        }
    })
}


const lunbobox = document.querySelector('.main1 .lunbo_l')
const imgBox2 = document.querySelector('.main1 .lunbo_l ul')
const pointBox2 = document.querySelector('.main1 .lunbo_l ol')
const w2 = lunbobox.clientWidth
let timer2
let index2 = 1
let flag2 = true


function move(ele, target, fn = () => {
}) {
    let timer2;
    let count2 = 0;
    clearInterval(timer2)
    for (let key in target) {
        count2++
        if (key === 'opacity') {
            target[key] *= 100
        }
        timer2 = setInterval(() => {
            let current = key === 'opacity' ? window.getComputedStyle(ele)['opacity'] * 100 : parseFloat(window.getComputedStyle(ele)[key])
            let distant = (target[key] - current) / 10
            distant = distant > 0 ? Math.ceil(distant) : Math.floor(distant)
            if (target[key] === current) {
                clearInterval(timer2)
                count2--
                if (!count2) {
                    fn()
                }
            } else {
                ele.style[key] = key === 'opacity' ? (current + distant) / 100 : current + distant + 'px'
            }
        }, 5)

    }
}

setPoint2()

function setPoint2() {
    const num2 = imgBox2.children.length
    const frg2 = document.createDocumentFragment()
    for (let i = 0; i < num2; i++) {
        const li = document.createElement('li')
        li.setAttribute('type2', 'point2')
        li.setAttribute('type_index2', i + 1)
        if (i === 0) {
            li.classList.add('active2')
        }
        frg2.appendChild(li)
    }
    pointBox2.appendChild(frg2)
    pointBox2.style.width = num2 * (510 / 11) + 'px'
    pointBox2.style.marginLeft = -pointBox2.clientWidth / 2 + 'px'
}

copyEle2()

function copyEle2() {
    const first = imgBox2.lastElementChild.cloneNode(true)
    const last = imgBox2.firstElementChild.cloneNode(true)
    imgBox2.appendChild(last)
    imgBox2.insertBefore(first, imgBox2.firstElementChild)
    imgBox2.style.width = imgBox2.children.length * 100 + '%'
    imgBox2.style.left = -w2 + 'px'
}

autoPlay2()

function autoPlay2() {
    clearInterval(timer2)
    timer2 = setInterval(function () {
        index2++
        move(imgBox2, {left: -w2 * index2}, End2)
    }, 1500)
}

End2()

function End2() {
    if (index2 === imgBox2.children.length - 1) {
        index2 = 1
        imgBox2.style.left = -w2 * index2 + 'px'
    }
    if (index2 === 0) {
        index2 = imgBox2.children.length - 2
        imgBox2.style.left = -w2 * index2 + 'px'
    }
    for (let i = 0; i < pointBox2.children.length; i++) {
        pointBox2.children[i].className = ''
    }
    pointBox2.children[index2 - 1].className = 'active2'
    flag2 = true
}

overout2()

function overout2() {
    lunbobox.addEventListener('mouseover', function () {
        clearInterval(timer2)
    })
    lunbobox.addEventListener('mouseout', function () {
        autoPlay2()
    })
}

onEvent2()

function onEvent2() {
    lunbobox.addEventListener('click', function (eve) {
        let e = eve || event
        const target = e.target || e.srcElement
        if (target.className === 'left') {
            if (!flag2) return
            index2--
            move(imgBox2, {left: -index2 * w2}, End2)
            flag2 = false
        }
        if (target.className === 'right') {
            if (!flag2) return
            index2++
            move(imgBox2, {left: -index2 * w2}, End2)
            flag2 = false
        }
        if (target.getAttribute('type2') === 'point2') {
            if (!flag2) return
            index2 = target.getAttribute('type_index2') - 0
            move(imgBox2, {left: -index2 * w2}, End2)
            flag2 = false
        }
    })
}

changeTab2()

function changeTab2() {
    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState === 'hidden') {
            clearInterval(timer2)
        } else if (document.visibilityState === 'visible') {
            autoPlay2()
        }
    })
}


   